<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <link rel="stylesheet" href="style.css">
    <style>
        a[target="_blank"] {
            color: #42b883;
        }
    </style>
</head>
<body>
    <h1>Vue</h1>
    <p>
        <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer">Vue</a> 是一个渐进式 UI 框架。
    </p>

    <h2>一、安装</h2>
    <p>在本地安装基于构建工具的 Vue 项目：</p>
    <pre>$ npm init vue@latest</pre>
    <p>这会下载并执行 <a href="https://github.com/vuejs/create-vue" target="_blank">create-vue</a>，Vue 的官方脚手架工具。</p>

    <h2>Template Refs</h2>
    <p>
        <a href="https://vuejs.org/guide/essentials/template-refs.html" target="_blank" rel="noopener noreferrer">Template Refs</a> 可以获取 DOM 元素的引用。
    </p>
    <pre>&lt;input ref="input"&gt;</pre>
    <p>使用时，需要在 script 块创建一个同名 <code>ref</code></p>
    <pre>&lt;script setup&gt;
    import { ref, onMounted } from 'vue'

    const input = ref(null)
    onMounted(() => {
        input.value.focus()
    })
&lt;/script&gt;</pre>
</body>
</html>